﻿<h5>Device Size</h5>
<ul class="list-group">
    <li class="list-group-item @Active(IsLarge)">Large</li>
    <li class="list-group-item @Active(IsMedium)">Medium</li>
    <li class="list-group-item @Active(IsSmall)">Small</li>
</ul>

<MediaQuery Media="@Breakpoints.LargeUp" @bind-Matches="IsLarge" />
<MediaQuery Media="@Breakpoints.OnlyMedium" @bind-Matches="IsMedium" />
<MediaQuery Media="@Breakpoints.SmallDown" @bind-Matches="IsSmall" />

@code {
    Func<bool, string> Active = state => state ? "active" : "";
    bool IsLarge = false;
    bool IsMedium = false;
    bool IsSmall = false;
}
